<script setup lang="ts">
import { onMounted } from 'vue';
import dayjs from 'dayjs';
import { state, imgList } from './state';
import { getSysImgUrl } from '/@/utils/index';
import { fileNameForUploadFile, uploadImageFile } from '/@/utils/file';
import {
  APP_SCHEDULE_RECORD_DETAIL_QUERY,
  CHECK_APP_SCHEDULE_RECORD,
} from '/@/api/modules/base/schedule-app';
import { getCurrentInstance, navigateTo, showLoading } from '@tarojs/taro';
import { appEvents } from '/@/utils/events';
/**
 * 签收
 */
function submit() {
  if (
    dayjs().isBefore(dayjs(state.content?.floatTimeBegin)) ||
    dayjs().isAfter(dayjs(state.content?.floatTimeEnd))
  ) {
    state.tipVisible = true;
    return;
  }
  checkAppScheduleRecord();
}

/**
 * 确实签字
 */
function signatureConfirm() {
  //未签收
  navigateTo({
    url: `/pages/swap/sign/index?dd_orientation=landscape&id=${params.id}`,
  });
}

/**
 * 交接班动作——接班确认（返回成功与否）
 */
function checkAppScheduleRecord() {
  CHECK_APP_SCHEDULE_RECORD({ content: state.content })
    .then((res) => {
      if (res.comResp?.code == 100) {
        navigateTo({
          url: '/pages/swap/sign-success/index',
        });
      }
    })
    .catch();
}
/**
 * 获取路由参数
 */
const params = getCurrentInstance().router?.params as { id: string };

/**
 * 查询排班记录详情
 * @param id 排班记录id
 */
function queryAppScheduleRecordDetail(id: string) {
  showLoading();
  APP_SCHEDULE_RECORD_DETAIL_QUERY({ id }).then((res) => {
    state.content = res.content;
  });
}

/**
 * 页面加载
 */
onMounted(() => {
  queryAppScheduleRecordDetail(params.id);
  appEvents.on('canvas', (signUrl) => {
    console.log('canvas-data:', signUrl);
    const newUrl = signUrl.value.replace('data:image/png;base64,', '');
    const suffix = '.jpg'; //文件名后缀
    const fileName = fileNameForUploadFile(suffix);
    console.log('newUrl:', newUrl);
    uploadImageFile(
      '',
      fileName,
      fileName,
      'schedule',
      (url: string) => {
        state.content!.nameFile = url;
      },
      '2',
      newUrl,
    );
  });
});
</script>

<template>
  <view class="swap-my app-page--1">
    <app-navbar title="交接班" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="swap-my__wrapper">
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <view class="swap-my__container">
                <text class="swap-my__container__title">{{
                  state.content?.recordType === 1 ? '我的交班' : '我的接班'
                }}</text>
                <text
                  class="swap-my__status"
                  :style="{
                    color: state.content?.status === 2 ? '#1ABE96' : '#ee4e36',
                    borderColor: state.content?.status === 2 ? '#1ABE96' : '#ee4e36',
                  }"
                  >{{ state.content?.status === 2 ? '已完成' : '未签收' }}</text
                >
              </view>
            </template>
          </nut-cell>

          <nut-cell title="所属部门" :desc="state.content?.organName || '_'" />
          <nut-cell title="交接班时" :desc="state.content?.scheduleName || '_'"> </nut-cell>
          <nut-cell
            title="交接时间"
            :desc="
              dayjs(state.content?.floatTimeBegin).format('YYYY-MM-DD HH:mm') +
              '-' +
              dayjs(state.content?.floatTimeEnd).format('HH:mm')
            "
          />
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-my__title">交接内容</text>
            </template>
          </nut-cell>
          <nut-cell title="1.设备运行方式及变更情况:" />
          <nut-cell
            :title="item.contentName"
            :desc="item.contentValue"
            v-for="item in state.content?.state"
            :key="item.id"
          />
          <nut-cell title="2.读数记录:" />
          <nut-cell
            :title="item.contentName"
            :desc="item.contentValue"
            v-for="item in state.content?.record"
            :key="item.id"
          />
          <nut-cell title="3.确认事项:" />
          <nut-cell
            :title="item.contentName"
            :desc="item.contentValue === '1' ? '是' : '否'"
            v-for="item in state.content?.event"
            :key="item.id"
          />
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-my__title">提醒事项</text>
              <view>
                <text>{{ state.content?.remind }}</text>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-my__title">关联事项</text>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view>
                <text>维修工单</text>
              </view>
              <view
                v-if="state.content?.workOrderContent && state.content?.workOrderContent.length > 0"
                v-for="item in state.content?.workOrderContent"
                :key="item.clickId"
              >
                <text class="swap-my__link">{{ item.clickName }}</text>
              </view>
              <view v-else>
                <text>无</text>
              </view>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view>
                <text>报警记录</text>
              </view>
              <view
                v-if="state.content?.alarmContent && state.content?.alarmContent.length > 0"
                v-for="item in state.content?.alarmContent"
                :key="item.clickId"
              >
                <text class="swap-my__link">{{ item.clickName }}</text>
              </view>
              <view>
                <text>无</text>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-my__title">上传图片</text>
              <nut-cell v-if="imgList && imgList.length">
                <app-upload-image :default-image-list="imgList" readonly />
              </nut-cell>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell
            title="接班人"
            :desc="state.content?.overPerson || '_'"
            v-if="state.content?.recordType === 1"
          />
          <nut-cell title="交班人" :desc="state.content?.shiftPerson || '_'" v-else />
        </nut-cell-group>
        <nut-cell-group v-if="state.content?.nameFile || state.content?.status === 2">
          <nut-cell>
            <template v-slot:title>
              <view class="swap-my__container">
                <text class="swap-my__container__title">签字确认</text>
                <nut-avatar shape="square" size="large">
                  <image
                    v-if="state.content?.nameFile"
                    :src="getSysImgUrl(state.content?.nameFile)"
                    class="swap-my__image"
                    mode="aspectFill"
                  />
                  <app-nut-icon-tips v-else />
                </nut-avatar>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
    <view class="swap-my__footer" v-if="state.content?.status === 1">
      <nut-button block type="info" @click="submit()" v-if="state.content?.nameFile">
        签收
      </nut-button>
      <nut-button block type="info" @click="signatureConfirm()" v-else> 签字确认 </nut-button>
    </view>
    <nut-dialog
      no-cancel-btn
      title="不可签收"
      content="不在交接时间内，不可签收"
      v-model:visible="state.tipVisible"
    />
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
